<template>
  <div class="tab-content">
    <div class="tab-header">
      <h2>我的推荐</h2>
    </div>
    
    <!-- 标签页导航 -->
    <div class="tab-nav" @wheel="handleTabWheel">
      <button 
        v-for="tab in tabs" 
        :key="tab.key"
        :class="['tab-button', { active: activeTab === tab.key }]"
        @click="switchTab(tab.key)"
      >
        {{ tab.name }}
      </button>
    </div>
    
    <!-- 标签页内容 -->
    <div class="tab-panels">
      <!-- 学术期刊 -->
      <div v-if="activeTab === 'journal'" class="tab-panel">
        <div class="recommendation-table">
          <table>
            <thead>
              <tr>
                <th>资源信息</th>
                <th>推荐时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in journalItems" :key="item.id">
                <td class="resource-info">
                  <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="期刊封面" class="table-cover">
                  <div class="resource-details">
                    <div class="resource-title">{{ item.title }}</div>
                    <div class="resource-meta">{{ item.meta }}</div>
                  </div>
                </td>
                <td>{{ item.recommendationTime }}</td>
                <td>
                  <button class="btn-action cancel-recommend" @click="cancelRecommendation(item.id)">取消推荐</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 分页组件 -->
        <div class="page-warp">
          <base-pagination
            @current-change="changePage"
            @size-change="changePageSize"
            background
            layout="prev, pager, next, jumper, sizes, total"
            :total="totalItems"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
          ></base-pagination>
        </div>
      </div>
      
      <!-- 学术论文 -->
      <div v-else-if="activeTab === 'article'" class="tab-panel">
        <div class="recommendation-table">
          <table>
            <thead>
              <tr>
                <th>资源信息</th>
                <th>推荐时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in articleItems" :key="item.id">
                <td class="resource-info">
                  <div class="resource-details">
                    <div class="resource-title">{{ item.title }}</div>
                    <div class="resource-meta">{{ item.meta }}</div>
                  </div>
                </td>
                <td>{{ item.recommendationTime }}</td>
                <td>
                  <button class="btn-action cancel-recommend" @click="cancelRecommendation(item.id)">取消推荐</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 分页组件 -->
        <div class="page-warp">
          <base-pagination
            @current-change="changePage"
            @size-change="changePageSize"
            background
            layout="prev, pager, next, jumper, sizes, total"
            :total="totalItems"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
          ></base-pagination>
        </div>
      </div>
      
      <!-- 数字影像 -->
      <div v-else-if="activeTab === 'video'" class="tab-panel">
        <div class="recommendation-table">
          <table>
            <thead>
              <tr>
                <th>资源信息</th>
                <th>推荐时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in videoItems" :key="item.id">
                <td class="resource-info">
                  <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="音频封面" class="table-cover">
                  <div class="resource-details">
                    <div class="resource-title">{{ item.title }}</div>
                    <!-- 拆分为主讲人和主办单位两个独立显示项 -->
                    <div class="meta-separated">
                      <div class="meta-item speaker">主讲人：{{ item.speaker }}</div>
                      <div class="meta-item organizer">主办单位：{{ item.organizer }}</div>
                    </div>
                  </div>
                </td>
                <td>{{ item.recommendationTime }}</td>
                <td>
                  <button class="btn-action cancel-recommend" @click="cancelRecommendation(item.id)">取消推荐</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 分页组件 -->
        <div class="page-warp">
          <base-pagination
            @current-change="changePage"
            @size-change="changePageSize"
            background
            layout="prev, pager, next, jumper, sizes, total"
            :total="totalItems"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
          ></base-pagination>
        </div>
      </div>
      
      <!-- 数字音频 -->
      <div v-else-if="activeTab === 'audio'" class="tab-panel">
        <div class="recommendation-table">
          <table>
            <thead>
              <tr>
                <th>资源信息</th>
                <th>推荐时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in audioItems" :key="item.id">
                <td class="resource-info">
                  <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="音频封面" class="table-cover">
                  <div class="resource-details">
                    <div class="resource-title">{{ item.title }}</div>
                    <div v-if="activeTab === 'video' || activeTab === 'audio'" class="meta-separated">
                      <div class="meta-item speaker">主讲人：{{ item.speaker }}</div>
                      <div class="meta-item organizer">主办单位：{{ item.organizer }}</div>
                    </div>
                    <div v-else class="resource-meta">{{ item.meta }}</div>
                  </div>
                </td>
                <td>{{ item.recommendationTime }}</td>
                <td>
                  <button class="btn-action cancel-recommend" @click="cancelRecommendation(item.id)">取消推荐</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 分页组件 -->
        <div class="page-warp">
          <base-pagination
            @current-change="changePage"
            @size-change="changePageSize"
            background
            layout="prev, pager, next, jumper, sizes, total"
            :total="totalItems"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
          ></base-pagination>
        </div>
      </div>
      <!-- 数字文字 -->
      <div v-else-if="activeTab === 'text'" class="tab-panel">
        <div class="recommendation-table">
          <table>
            <thead>
              <tr>
                <th>资源信息</th>
                <th>推荐时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in textItems" :key="item.id">
                <td class="resource-info">
                  <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="文字封面" class="table-cover">
                  <div class="resource-details">
                    <div class="resource-title">{{ item.title }}</div>
                    <div class="resource-meta">{{ item.meta }}</div>
                  </div>
                </td>
                <td>{{ item.recommendationTime }}</td>
                <td>
                  <button class="btn-action cancel-recommend" @click="cancelRecommendation(item.id)">取消推荐</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 分页组件 -->
        <div class="page-warp">
          <base-pagination
            @current-change="changePage"
            @size-change="changePageSize"
            background
            layout="prev, pager, next, jumper, sizes, total"
            :total="totalItems"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
          ></base-pagination>
        </div>
      </div>
      <!-- 文章 -->
      <div v-else-if="activeTab === 'post'" class="tab-panel">
        <div class="recommendation-table">
          <table>
            <thead>
              <tr>
                <th>资源信息</th>
                <th>推荐时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in postItems" :key="item.id">
                <td class="resource-info">
                  <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="文章封面" class="table-cover">
                  <div class="resource-details">
                    <div class="resource-title">{{ item.title }}</div>
                    <div class="resource-meta">{{ item.meta }}</div>
                  </div>
                </td>
                <td>{{ item.recommendationTime }}</td>
                <td>
                  <button class="btn-action cancel-recommend" @click="cancelRecommendation(item.id)">取消推荐</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 分页组件 -->
        <div class="page-warp">
          <base-pagination
            @current-change="changePage"
            @size-change="changePageSize"
            background
            layout="prev, pager, next, jumper, sizes, total"
            :total="totalItems"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
          ></base-pagination>
        </div>
      </div>
      
      <!-- 专利 -->
      <div v-else-if="activeTab === 'patent'" class="tab-panel">
        <div class="recommendation-table">
          <table>
            <thead>
              <tr>
                <th>资源信息</th>
                <th>推荐时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in patentItems" :key="item.id">
                <td class="resource-info">
                  <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="专利封面" class="table-cover">
                  <div class="resource-details">
                    <div class="resource-title">{{ item.title }}</div>
                    <div class="resource-meta">{{ item.meta }}</div>
                  </div>
                </td>
                <td>{{ item.recommendationTime }}</td>
                <td>
                  <button class="btn-action cancel-recommend" @click="cancelRecommendation(item.id)">取消推荐</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 分页组件 -->
        <div class="page-warp">
          <base-pagination
            @current-change="changePage"
            @size-change="changePageSize"
            background
            layout="prev, pager, next, jumper, sizes, total"
            :total="totalItems"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
          ></base-pagination>
        </div>
      </div>
      
      <!-- 标准 -->
      <div v-else-if="activeTab === 'standard'" class="tab-panel">
        <div class="recommendation-table">
          <table>
            <thead>
              <tr>
                <th>资源信息</th>
                <th>推荐时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in standardItems" :key="item.id">
                <td class="resource-info">
                  <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="标准封面" class="table-cover">
                  <div class="resource-details">
                    <div class="resource-title">{{ item.title }}</div>
                    <div class="resource-meta">{{ item.meta }}</div>
                  </div>
                </td>
                <td>{{ item.recommendationTime }}</td>
                <td>
                  <button class="btn-action cancel-recommend" @click="cancelRecommendation(item.id)">取消推荐</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 分页组件 -->
        <div class="page-warp">
          <base-pagination
            @current-change="changePage"
            @size-change="changePageSize"
            background
            layout="prev, pager, next, jumper, sizes, total"
            :total="totalItems"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
          ></base-pagination>
        </div>
      </div>
      
      <!-- 报告 -->
      <div v-else-if="activeTab === 'report'" class="tab-panel">
        <div class="recommendation-table">
          <table>
            <thead>
              <tr>
                <th>资源信息</th>
                <th>推荐时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in reportItems" :key="item.id">
                <td class="resource-info">
                  <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="报告封面" class="table-cover">
                  <div class="resource-details">
                    <div class="resource-title">{{ item.title }}</div>
                    <div class="resource-meta">{{ item.meta }}</div>
                  </div>
                </td>
                <td>{{ item.recommendationTime }}</td>
                <td>
                  <button class="btn-action cancel-recommend" @click="cancelRecommendation(item.id)">取消推荐</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 分页组件 -->
        <div class="page-warp">
          <base-pagination
            @current-change="changePage"
            @size-change="changePageSize"
            background
            layout="prev, pager, next, jumper, sizes, total"
            :total="totalItems"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
          ></base-pagination>
        </div>
      </div>
      
      <!-- 电子书 -->
      <div v-else-if="activeTab === 'ebook'" class="tab-panel">
        <div class="recommendation-table">
          <table>
            <thead>
              <tr>
                <th>资源信息</th>
                <th>推荐时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in ebookItems" :key="item.id">
                <td class="resource-info">
                  <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="电子书封面" class="table-cover">
                  <div class="resource-details">
                    <div class="resource-title">{{ item.title }}</div>
                    <div class="resource-meta">{{ item.meta }}</div>
                  </div>
                </td>
                <td>{{ item.recommendationTime }}</td>
                <td>
                  <button class="btn-action cancel-recommend" @click="cancelRecommendation(item.id)">取消推荐</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 分页组件 -->
        <div class="page-warp">
          <base-pagination
            @current-change="changePage"
            @size-change="changePageSize"
            background
            layout="prev, pager, next, jumper, sizes, total"
            :total="totalItems"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
          ></base-pagination>
        </div>
      </div>
      

       <!-- 会议论文集 -->
      <div v-else-if="activeTab === 'conference'" class="tab-panel">
        <div class="recommendation-table">
          <table>
            <thead>
              <tr>
                <th>资源信息</th>
                <th>推荐时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in conferenceItems" :key="item.id">
                <td class="resource-info">
                  <img :src="item.cover" alt="期刊封面" class="table-cover">
                  <div class="resource-details">
                    <div class="resource-title">{{ item.title }}</div>
                  </div>
                </td>
                <td>{{ item.recommendationTime }}</td>
                <td>
                  <button class="btn-action cancel-recommend" @click="cancelRecommendation(item.id)">取消推荐</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 分页组件 -->
        <div class="page-warp">
          <base-pagination
            @current-change="changePage"
            @size-change="changePageSize"
            background
            layout="prev, pager, next, jumper, sizes, total"
            :total="totalItems"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
          ></base-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ListJournal, ListResource} from "@/service/recommendation"
import {ListArticle} from "@/service/recommendation"
import {ListVideoAudioText} from "@/service/recommendation"
import {ListConference} from "@/service/recommendation"
import {CancelRecommendation} from "@/service/recommendation"
export default {
  name: 'MyRecommendations',
  components: {},
  
  data() {
    return {
      // 标签页配置（与收藏页面保持一致的顺序，但少一个动态资讯tab）
      tabs: [
        { key: 'journal', name: '学术期刊' },
        { key: 'article', name: '学术论文' },
        { key: 'video', name: '数字影像' },
        { key: 'audio', name: '数字音频' },
        { key: 'text', name: '数字文字' },
        { key: 'post', name: '文章' },
        { key: 'patent', name: '专利' },
        { key: 'standard', name: '标准' },
        { key: 'report', name: '报告' },
        { key: 'ebook', name: '电子书' },
        { key: 'conference', name: '会议论文集' }
      ],
      activeTab: 'journal', // 默认选中的标签
      
      // 分页相关配置
      currentPage: 1,
      pageSize: 10,
      totalItems: 0, // 初始设为0，通过接口获取
      gotoPageNum: 1,
      // 学术期刊数据
      journalItems: [],
      // 学术论文数据
      articleItems: [],
      // 数字影像数据
      videoItems: [],
      // 数字音频数据
      audioItems: [],
      // 数字文字数据
      textItems: [],
      postItems: [],
      patentItems: [],
      standardItems: [],
      reportItems: [],
      ebookItems: [],
      //会议论文集
      conferenceItems: []
    }
  },
  created() {
    this.loadJournalData();
  },
  
  computed: {
    // 计算总页数
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize);
    }
  },
  
  methods: {
    // 加载学术期刊数据
    async loadJournalData() {
      try {
        const response = await ListJournal({ page: this.currentPage, size: this.pageSize });
        
        if (response.code === 0 && response.data) {
          this.totalItems = response.data.total;
          this.journalItems = response.data.records.map(item => ({
            id: item.id,
            resourceId: item.journalId,
            title: item.journalTitle,
            meta: `ISSN: ${item.journalIssn}`,
            // 移除封面URL中的额外空格和引号
            cover: item.journalCoverImg ? item.journalCoverImg.trim().replace(/^`|`$/g, '') : '@/assets/images/home/news_cover.png',
            recommendationTime: item.recommendationTime
          }));
        } else {
          console.error('加载学术期刊数据失败:', response.msg);
        }
      } catch (error) {
        console.error('加载学术期刊数据时发生错误:', error);
      }
    },
    
    // 加载学术论文数据
    async loadArticleData() {
      try {
        const response = await ListArticle({ page: this.currentPage, size: this.pageSize });
        
        if (response.code === 0 && response.data) {
          this.totalItems = response.data.total;
          this.articleItems = response.data.records.map(item => ({
            id: item.id,
            resourceId: item.articleId,
            title: item.articleTitle,
            meta: item.articleAuthors ? `作者: ${item.articleAuthors}` : '',
            recommendationTime: item.recommendationTime
          }));
        } else {
          console.error('加载学术论文数据失败:', response.msg);
        }
      } catch (error) {
        console.error('加载学术论文数据时发生错误:', error);
      }
    },
    
    // 加载数字影像数据
    async loadVideoData() {
      try {
        const response = await ListVideoAudioText({ page: this.currentPage, size: this.pageSize, resourceType: 3 });
        
        if (response.code === 0 && response.data) {
          this.totalItems = response.data.total;
          this.videoItems = response.data.records.map(item => ({
            id: item.id,
            resourceId: item.videoAudioTextId,
            title: item.videoAudioTextName,
            meta: `主讲人：${item.videoAudioTextSpeaker}\n主办单位：${item.videoAudioTextOrganizer}`,
            speaker: item.videoAudioTextSpeaker,
            organizer: item.videoAudioTextOrganizer,
            // 移除封面URL中的额外空格和引号
            cover: item.videoAudioTextCover ? item.videoAudioTextCover.trim().replace(/^`|`$/g, '') : '@/assets/images/home/news_cover.png',
            recommendationTime: item.recommendationTime
          }));
        } else {
          console.error('加载数字影像数据失败:', response.msg);
        }
      } catch (error) {
        console.error('加载数字影像数据时发生错误:', error);
      }
    },
    
    // 加载数字音频数据
    async loadAudioData() {
      try {
        const response = await ListVideoAudioText({ page: this.currentPage, size: this.pageSize, resourceType: 4 });
        
        if (response.code === 0 && response.data) {
          this.totalItems = response.data.total;
          this.audioItems = response.data.records.map(item => ({
            id: item.id,
            resourceId: item.videoAudioTextId,
            title: item.videoAudioTextName,
            meta: `主讲人：${item.videoAudioTextSpeaker}\n主办单位：${item.videoAudioTextOrganizer}`,
            speaker: item.videoAudioTextSpeaker,
            organizer: item.videoAudioTextOrganizer,
            // 移除封面URL中的额外空格和引号
            cover: item.videoAudioTextCover ? item.videoAudioTextCover.trim().replace(/^`|`$/g, '') : '@/assets/images/home/news_cover.png',
            recommendationTime: item.recommendationTime
          }));
        } else {
          console.error('加载数字音频数据失败:', response.msg);
        }
      } catch (error) {
        console.error('加载数字音频数据时发生错误:', error);
      }
    },
    
    // 加载数字文字数据
    async loadTextData() {
      try {
        const response = await ListVideoAudioText({ page: this.currentPage, size: this.pageSize, resourceType: 5 });
        
        if (response.code === 0 && response.data) {
          this.totalItems = response.data.total;
            
            this.textItems = response.data.records.map(item => ({
            id: item.id,
            resourceId: item.videoAudioTextId,
            title: item.videoAudioTextName,
            meta: `主讲人：${item.videoAudioTextSpeaker}\n主办单位：${item.videoAudioTextOrganizer}`,
            // 移除封面URL中的额外空格和引号
            cover: item.videoAudioTextCover ? item.videoAudioTextCover.trim().replace(/^`|`$/g, '') : '@/assets/images/home/news_cover.png',
            recommendationTime: item.recommendationTime
          }));
        } else {
          console.error('加载数字文字数据失败:', response.msg);
        }
      } catch (error) {
        console.error('加载数字文字数据时发生错误:', error);
      }
    },
    /*post-文章；专利-patent；标准-standard；报告-report；电子书-ebook*/
    async loadPostData() {
      try {
        const response = await ListResource({ page: this.currentPage, size: this.pageSize, resourceType: 8 });

        if (response.code === 0 && response.data) {
          this.totalItems = response.data.total;

          this.postItems = response.data.records.map(item => ({
            id: item.id,
            resourceId: item.resourceId,
            title: item.resourceName,
            meta: `作者：${item.resourceAuthor}\n机构：${item.resourceOrganizer}`,
            // 移除封面URL中的额外空格和引号
            cover: item.resourceCover ? item.resourceCover.trim().replace(/^`|`$/g, '') : '@/assets/images/home/news_cover.png',
            recommendationTime: item.recommendationTime
          }));
        } else {
          console.error('加载文章数据失败:', response.msg);
        }
      } catch (error) {
        console.error('加载电子书数据时发生错误:', error);
      }
    },
    async loadPatentData() {
      try {
        const response = await ListResource({ page: this.currentPage, size: this.pageSize, resourceType: 9 });

        if (response.code === 0 && response.data) {
          this.totalItems = response.data.total;

          this.patentItems = response.data.records.map(item => ({
            id: item.id,
            resourceId: item.resourceId,
            title: item.resourceName,
            meta: `发明人：${item.resourceAuthor}`,
            // 移除封面URL中的额外空格和引号
            cover: item.resourceCover ? item.resourceCover.trim().replace(/^`|`$/g, '') : '@/assets/images/home/news_cover.png',
            recommendationTime: item.recommendationTime
          }));
        } else {
          console.error('加载专利数据失败:', response.msg);
        }
      } catch (error) {
        console.error('加载专利数据时发生错误:', error);
      }
    },
    async loadStandardData() {
      try {
        const response = await ListResource({ page: this.currentPage, size: this.pageSize, resourceType: 10 });

        if (response.code === 0 && response.data) {
          this.totalItems = response.data.total;

          this.standardItems = response.data.records.map(item => ({
            id: item.id,
            resourceId: item.resourceId,
            title: item.resourceName,
            meta: ` 起草人：${item.resourceAuthor}\n发布单位：${item.resourceOrganizer}`,
            // 移除封面URL中的额外空格和引号
            cover: item.resourceCover ? item.resourceCover.trim().replace(/^`|`$/g, '') : '@/assets/images/home/news_cover.png',
            recommendationTime: item.recommendationTime
          }));
        } else {
          console.error('加载标准数据失败:', response.msg);
        }
      } catch (error) {
        console.error('加载标准数据时发生错误:', error);
      }
    },
    async loadReportData() {
      try {
        const response = await ListResource({ page: this.currentPage, size: this.pageSize, resourceType: 11 });

        if (response.code === 0 && response.data) {
          this.totalItems = response.data.total;

          this.reportItems = response.data.records.map(item => ({
            id: item.id,
            resourceId: item.resourceId,
            title: item.resourceName,
            meta: ` 作者：${item.resourceAuthor}\n发布机构：${item.resourceOrganizer}`,
            // 移除封面URL中的额外空格和引号
            cover: item.resourceCover ? item.resourceCover.trim().replace(/^`|`$/g, '') : '@/assets/images/home/news_cover.png',
            recommendationTime: item.recommendationTime
          }));
        } else {
          console.error('加载报告数据失败:', response.msg);
        }
      } catch (error) {
        console.error('加载报告数据时发生错误:', error);
      }
    },
    async loadEbookData() {
      try {
        const response = await ListResource({ page: this.currentPage, size: this.pageSize, resourceType: 12 });

        if (response.code === 0 && response.data) {
          this.totalItems = response.data.total;

          this.ebookItems = response.data.records.map(item => ({
            id: item.id,
            resourceId: item.resourceId,
            title: item.resourceName,
            meta: ` 作者：${item.resourceAuthor}\n出版社：${item.resourceOrganizer}`,
            // 移除封面URL中的额外空格和引号
            cover: item.resourceCover ? item.resourceCover.trim().replace(/^`|`$/g, '') : '@/assets/images/home/news_cover.png',
            recommendationTime: item.recommendationTime
          }));
        } else {
          console.error('加载文章数据失败:', response.msg);
        }
      } catch (error) {
        console.error('加载文章数据时发生错误:', error);
      }
    },

    // 加载会议论文集数据
    async loadConferenceData() {
      try {
        const response = await ListConference({ page: this.currentPage, size: this.pageSize });
        
        if (response.code === 0 && response.data) {
          this.totalItems = response.data.total;
          this.conferenceItems = response.data.records.map(item => ({
            id: item.id,
            resourceId: item.proceedingId,
            title: item.proceedingName,
            // 移除封面URL中的额外空格和引号
            cover: item.proceedingCoverImg ? item.proceedingCoverImg.trim().replace(/^`|`$/g, '') : '@/assets/images/home/news_cover.png',
            recommendationTime: item.recommendationTime
          }));
        } else {
          console.error('加载学术期刊数据失败:', response.msg);
        }
      } catch (error) {
        console.error('加载学术期刊数据时发生错误:', error);
      }
    },
    
    getLoadMethodMap() {
      return {
        journal: this.loadJournalData,
        article: this.loadArticleData,
        video: this.loadVideoData,
        audio: this.loadAudioData,
        text: this.loadTextData,
        post: this.loadPostData,
        patent: this.loadPatentData,
        standard: this.loadStandardData,
        report: this.loadReportData,
        ebook: this.loadEbookData,
        conference: this.loadConferenceData
      };
    },
    
    // 加载当前标签页数据
    loadCurrentTabData() {
      const loadMethod = this.getLoadMethodMap()[this.activeTab];
      if (loadMethod) {
        loadMethod();
      } else {
        console.error('未找到对应的数据加载方法');
      }
    },
    
    // 切换标签页
    switchTab(tabKey) {
      this.activeTab = tabKey;
      this.currentPage = 1;
      this.gotoPageNum = 1;
      
      this.loadCurrentTabData();
    },
    
    // 改变页码
    changePage(page) {
      if (page < 1 || page > this.totalPages) {
        return;
      }
      this.currentPage = page;
      this.gotoPageNum = page;
      
      // 重新加载当前标签页数据
      this.loadCurrentTabData();
    },
    
    // 改变每页显示数量
    changePageSize() {
      this.currentPage = 1;
      this.gotoPageNum = 1;
      this.loadCurrentTabData();
    },
    
    // 跳转到指定页
    gotoPage() {
      let page = parseInt(this.gotoPageNum);
      if (!isNaN(page) && page >= 1) {
        this.changePage(page);
      }
    },
    
    async cancelRecommendation(id) {
      try {
        const tabMap = {
          journal: { type: 1, items: this.journalItems },
          article: { type: 2, items: this.articleItems },
          video: { type: 3, items: this.videoItems },
          audio: { type: 4, items: this.audioItems },
          text: { type: 5, items: this.textItems },
          post: { type: 8, items: this.postItems },
          patent: { type: 9, items: this.patentItems },
          standard: { type: 10, items: this.standardItems },
          report: { type: 11, items: this.reportItems },
          ebook: { type: 12, items: this.ebookItems },
          conference: { type: 7, items: this.conferenceItems }
        };
        
        const tabConfig = tabMap[this.activeTab];
        if (!tabConfig) {
          console.error('未知的标签页类型:', this.activeTab);
          this.$message.error('操作失败，请稍后重试');
          return;
        }
        
        const resourceType = tabConfig.type;
        
        const item = tabConfig.items.find(item => item.id === id);
        if (!item || !item.resourceId) {
          console.error('未找到对应的推荐项或缺少resourceId');
          this.$message.error('操作失败，请稍后重试');
          return;
        }
        const resourceId = item.resourceId;
        const response = await CancelRecommendation({ 
          resourceId: resourceId,
          resourceType: resourceType 
        });
        
        if (response.code === 0) {
          this.loadCurrentTabData();
          this.$message.success('取消推荐成功');
        } else {
          console.error('取消推荐失败:', response.msg);
          this.$message.error('取消推荐失败，请稍后重试');
        }
      } catch (error) {
        console.error('取消推荐时发生错误:', error);
        this.$message.error('网络错误，请稍后重试');
      }
    },
    
    // 处理标签页导航的滚轮事件
    handleTabWheel(event) {
      // 阻止默认的页面滚动行为
      event.preventDefault();
      // 横向滚动标签页导航
      event.currentTarget.scrollBy({ 
        left: event.deltaY > 0 ? 100 : -100, 
        behavior: 'smooth' 
      });
    }
  }
}
</script>

<style scoped>
.tab-content {
  padding: 18px 16px;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.tab-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

/* 标签页导航样式 */
.tab-nav {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
  overflow-x: auto;
  /* 隐藏滚动条但保留滚动功能 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 隐藏滚动条 */
.tab-nav::-webkit-scrollbar {
  display: none;
}

.tab-button {
  padding: 12px 24px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}

.tab-button:hover {
  color: #4A90E2;
  background-color: #f5f5f5;
}

.tab-button.active {
  color: #4A90E2;
  background-color: #f0f7ff;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #4A90E2;
}

.recommendation-table {
  margin-bottom: 20px;
  overflow-x: auto;
}

.recommendation-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.recommendation-table th {
  background-color: #ecf1fd;
  padding: 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.recommendation-table td {
  padding: 12px;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #f0f0f0;
}

.recommendation-table th:nth-child(2),
.recommendation-table td:nth-child(2) {
  width: 25%;
  white-space: nowrap;
}

.recommendation-table th:last-child,
.recommendation-table td:last-child {
  width: 15%;
  white-space: nowrap;
}

.recommendation-table tr:hover {
  background-color: #f9f9f9;
}

.resource-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-cover {
  width: 60px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.resource-details {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.resource-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.resource-meta {
  font-size: 12px;
  color: #999;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* 主讲人和主办单位分开显示的样式 */
.meta-separated {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.meta-item {
  font-size: 12px;
  color: #999;
}

.meta-item.speaker {
  margin-bottom: 2px;
}

.meta-item.organizer {
  /* 主办单位文本可在资源信息列宽度内完整显示 */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.btn-action {
  background-color: #fff;
  color: #666;
  border: 1px solid #e8e8e8;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.btn-action:hover {
  color: #4A90E2;
  border-color: #4A90E2;
}

/* 分页样式 */
.page-warp {
  width: 100%;
  text-align: right;
  margin-top: 40px;
  padding: 16px 0;
  border-top: 1px solid #e8e8e8;
}

@media (max-width: 768px) {
  .tab-nav {
    flex-direction: column;
  }
  
  .tab-button {
    text-align: left;
  }
  
  .pagination {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .page-controls {
    flex-wrap: wrap;
  }
  
  .resource-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .table-cover {
    width: 100%;
    height: auto;
    max-height: 120px;
  }
}

</style>